<template>
  <view class="container">
    <!-- 内容区 -->
    <view class="content-area">
      <!-- 标题 -->
      <view class="header-section">
        <view class="title">{{ article.title }}</view>
        <view class="topic-tag" v-if="article.topicName">
          <text class="tag-prefix">#</text>
          <text class="tag-text">{{ article.topicName }}</text>
        </view>
      </view>

      <!-- 作者信息区域 -->
      <view class="author-section">
        <view class="author-info" @click="goToUserProfile(article.authorId)">
          <image class="author-avatar" :src="article.authorAvatar" mode="aspectFill"></image>
          <view class="author-details">
            <view class="author-name">{{ article.authorName }}</view>
            <view class="publish-time">{{ formatTimestamp(article.createTime) }}</view>
          </view>
        </view>
        <view class="follow-btn" v-if="isShow">
          <button v-if="!isAction" class="follow-button" @click="followAuthor(article.authorId)">
            <text class="tn-icon-add"></text>关注
          </button>
          <button v-else class="followed-button" @click="canlfollowAuthor(article.authorId)">
            <text class="tn-icon-check"></text>已关注
          </button>
        </view>
      </view>

      <!-- 文章内容 -->
      <view class="content-wrapper">
        <rich-text class="content" :nodes="article.content"></rich-text>
      </view>

      <!-- 封面图片/视频 -->
      <view class="media-section">
        <image v-if="article.videoUrl == ''"
               class="article-image"
               mode="aspectFill"
               :src="article.coverImage">
        </image>
        <video v-else
               class="article-video"
               :src="article.videoUrl"
               controls>
        </video>
      </view>

      <!-- 评论区 -->
      <view class="comments-section">
        <!-- 评论区标题 -->
        <view class="comments-header">
          <text class="comments-title">评论</text>
          <text class="comments-count">{{ comments ? comments.length : 0 }}条评论</text>
        </view>

        <!-- 评论列表 -->
        <view class="comments-list">
          <view v-if="!comments || comments.length === 0" class="no-comments">
            暂无评论
          </view>
          <view v-for="comment in comments" :key="comment.id" class="comment-item">
            <!-- 主评论 -->
            <view class="comment-main">
              <image class="comment-avatar" :src="comment.commenterAvatar" mode="aspectFill"></image>
              <view class="comment-content">
                <view class="comment-info">
                  <text class="comment-username">{{ comment.commenterName }}</text>
                  <text class="comment-time">{{ formatTimestamp(comment.createTime) }}</text>
                </view>
                <view class="comment-text">{{ comment.content }}</view>

                <!-- 评论操作按钮 -->
                <view class="comment-actions">
                  <view class="action-btn" @click="toggleCommentLike(comment)">
                    <text :class="['tn-icon', 'tn-icon-like', {'active': comment.isLiked}]"></text>
                    <text class="action-text">{{ comment.likesCount || 0 }}</text>
                  </view>
                  <view class="action-btn" @click="SubComments(comment)">
                    <text class="tn-icon tn-icon-comment"></text>
                    <text class="action-text">回复</text>
                  </view>
                  <!-- 展开/收起按钮 -->
                  <view v-if="comment.subComment && comment.subComment.length > 0" 
                        class="action-btn" 
                        @click="toggleSubComments(comment)">
                    <text class="tn-icon" :class="comment.showSubComments ? 'tn-icon-up' : 'tn-icon-down'"></text>
                    <text class="action-text">{{ comment.showSubComments ? '收起' : `展开${comment.subComment.length}条回复` }}</text>
                  </view>
                </view>
              </view>
            </view>

            <!-- 子评论列表 -->
            <view v-if="comment.subComment && comment.subComment.length > 0 && comment.showSubComments" 
                  class="sub-comments">
              <view v-for="subComment in comment.subComment"
                    :key="subComment.id"
                    class="sub-comment-item">
                <image class="comment-avatar" :src="subComment.commenterAvatar" mode="aspectFill"></image>
                <view class="comment-content">
                  <view class="comment-info">
                    <text class="comment-username">{{ subComment.commenterName }}</text>
                    <text class="comment-time">{{ formatTimestamp(subComment.createTime) }}</text>
                  </view>
                  <view class="comment-text">
                    <text v-if="subComment.replyToName" class="reply-to">回复 {{ subComment.replyToName }}：</text>
                    {{ subComment.content }}
                  </view>

                  <!-- 子评论操作按钮 -->
                  <view class="comment-actions">
                    <view class="action-btn" @click="toggleCommentLike(subComment)">
                      <text :class="['tn-icon', 'tn-icon-like', {'active': subComment.isLiked}]"></text>
                      <text class="action-text">{{ subComment.likesCount || 0 }}</text>
                    </view>
                    <view class="action-btn" @click="SubComments(subComment)">
                      <text class="tn-icon tn-icon-comment"></text>
                      <text class="action-text">回复</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 评论弹出层 -->
    <view v-if="isCommenting" class="comment-popup">
      <view class="popup-mask" @click="closeCommentBox"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ replyTo ? '回复 ' + replyTo : '写评论' }}</text>
          <text class="close-icon tn-icon-close" @click="closeCommentBox"></text>
        </view>
        <view class="input-area">
          <textarea
            class="comment-textarea"
            v-model="newComment"
            :placeholder="replyTo ? '回复 ' + replyTo + '...' : '写下你的评论...'"
            auto-height
            :focus="true"
            :cursor-spacing="200"
          />
          <view class="bottom-tools">
            <view class="tools-left">
              <text class="tn-icon-emoji tool-icon"></text>
              <text class="tn-icon-image tool-icon"></text>
            </view>
            <button
              class="send-button"
              :class="{ 'active': newComment.trim().length > 0 }"
              @click="submitComment"
            >发送</button>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部评论栏 -->
    <view class="floating-bar">
      <view class="comment-input-trigger" @click="openCommentBox()">
        <text class="input-placeholder">说点什么...</text>
      </view>
      <view class="action-buttons">
        <view class="action-item" @click="toggleLike">
          <text class="tn-icon-like" :class="{ 'active': isLiked }"></text>
          <text class="count">{{ likeCount }}</text>
        </view>
        <view class="action-item" @click="toggleFavorite">
          <text class="tn-icon-star" :class="{ 'active': isFavorited }"></text>
        </view>
        <view class="action-item">
          <text class="tn-icon-comment"></text>
          <text class="count">{{ comments.length }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import {
  getArticle,
  createArticleLike,
  getArticleLikePage,
  getArticleLike,
  deleteArticle,
  deleteArticleLike
} from '@/api/article'
import {
  createMsg, 
  getMsg, 
  getMsgPage, 
  updateMsg
} from "@/api/msg";
import {createFollow, deleteFollow, getFollowPage} from "@/api/fllow";
export default {
  mixins: [template_page_mixin],
  data() {
    return {
      isCommenting: false,
      fllowId: null,
      newComment: '',
      parentCommentId: null,
      isAction:false,
      id:null,
      color:['red','blue','green','yellow','purplered','purple','brown'],
      article: {

      },
      comments: [
      ],
      isLiked: false,
      likeCount: 0,
      isShow:true,
      isFavorited: false,
      formData: {
        id: null,
        articleId: null,
        userId: null,
      },
      currentData:null,
      fllowData: {
        id: null,
        userId: null,
        authorId: null,
        status: null,
        isAllData:null
      },
      replyTo: '', // 记录回复对象的名字
      currentCommentId: null, // 记录当前回复的评论ID
      currentMsgLikeData: null, // 用于存储当前评论的点赞数据
    };
  },
  mounted() {
    this.getArticleData();
  },
  onLoad(options) {
    // 获取URL参数中的 id
    this.id = options.id;
  },
  methods: {
    canlfollowAuthor(id){
      deleteFollow(this.fllowId).then(res=>{
        if (res.data.code===0){
          uni.showToast({
            title: '取消关注成功',
            icon: 'none'
          })
          this.getFllow()
          this.isAction = false
        }
      })
    },
    followAuthor(id){
      this.fllowData.authorId = id
      this.fllowData.userId = uni.getStorageSync("userId")
      this.fllowData.status = 0
      createFollow(this.fllowData).then(res=>{
        if (res.data.code===0){
          uni.showToast({
            title: '关注成功',
            icon: 'none'
          })
          this.getFllow()
          this.isAction = true
        }
      })
    },
    getFllow(){
      console.log(uni.getStorageSync("userId"))
      if (this.article.authorId == uni.getStorageSync("userId")){
        console.log(true)
        this.isShow =false
        return;
      }
      this.fllowData.authorId = this.article.authorId
      this.fllowData.userId = uni.getStorageSync("userId")
      this.fllowData.status = 0
      this.fllowData.isAllData = true
      getFollowPage(this.fllowData).then(res=>{
        if (res.data.data.total!=0){
          this.isAction = true
          this.fllowId = res.data.data.list[0].id
        }
      })
    },
    getMsgList() {
      const data = {
        articleId: this.article.id,
        isAllData: true,
        pageNo: 1,
        pageSize: 100
      }
      getMsgPage(data).then(res => {
        if (res.data.code === 0) {
          const commentsList = res.data.data.list || res.data.data;
          this.comments = this.convertToTree(commentsList);
        }
      })
    },
    // 将评论列表转换为树形结构
    convertToTree(list) {
      // 创建一个映射来存储所有评论
      const commentMap = {};
      const rootComments = [];

      // 第一次遍历：创建所有评论的映射
      list.forEach(comment => {
        comment.showSubComments = false;
        comment.subComment = [];
        // 找到回复的评论，设置回复对象的名字
        if (comment.parentCommentId !== 0) {
          const parentComment = list.find(c => c.id === comment.parentCommentId);
          if (parentComment) {
            comment.replyToName = parentComment.commenterName;
          }
        }
        commentMap[comment.id] = comment;
      });

      // 第二次遍历：构建树形结构
      list.forEach(comment => {
        if (comment.parentCommentId !== 0) {
          // 这是一个子评论
          const rootParent = this.findRootParent(comment, list);
          const parentComment = commentMap[rootParent.id];
          if (parentComment) {
            parentComment.subComment.push(comment);
          }
        } else {
          // 这是一个根评论
          rootComments.push(comment);
        }
      });

      return rootComments;
    },
    // 查找评论的一级父评论
    findRootParent(comment, list) {
      let current = comment;
      while (current.parentCommentId !== 0) {
        const parent = list.find(c => c.id === current.parentCommentId);
        if (!parent || parent.parentCommentId === 0) {
          return parent || current;
        }
        current = parent;
      }
      return current;
    },
    getRandomColor() {
      const randomIndex = Math.floor(Math.random() * this.color.length);
      return this.color[randomIndex];
    },
    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // getMonth() 返回 0-11
      const day = date.getDate();

      return `${year}年${month}月${day}日`;
    },
    getArticLike(){
      this.formData.articleId = this.article.id
      this.formData.userId = uni.getStorageSync("userId")
      this.formData.isAllData = true
      getArticleLikePage(this.formData).then(res=>{
        console.log(res)
        if (res.data.code  === 0){
          // this.likeCount = res.data.data.total
          const list = res.data.data.list;
          list.forEach(res=>{
            if (res.userId === JSON.parse(uni.getStorageSync("userId"))){
              console.log("包含当前登陆人的数据")
              this.isLiked = true
              this.currentData = res
            }
          })
        }
      })
    },
    getArticLikeTotal(){
      this.formData.articleId = this.article.id
      this.formData.isAllData = true
      this.formData.userId = null
      getArticleLikePage(this.formData).then(res=>{
        console.log(res)
        if (res.data.code  === 0){
          this.likeCount = res.data.data.total
        }
      })
    },
    getArticleData() {
      getArticle(this.id).then(res => {
        if (res.data.code === 0) {
          this.article = res.data.data;
          // 确保content存在
          this.article.content = this.formatContent(this.article.content);
          this.getFllow();
          this.getMsgList();
          this.getArticLike();
          this.getArticLikeTotal();
        }
      });
    },
    SubComments(val){
      this.openCommentBox(val)
      this.parentCommentId = val.id
    },
    // 打开评论框
    openCommentBox(comment = null) {
      this.isCommenting = true;
      if (comment) {
        this.replyTo = comment.commenterName;
        this.currentCommentId = comment.id;
      } else {
        this.replyTo = '';
        this.currentCommentId = null;
      }
    },
    // 关闭评论框
    closeCommentBox() {
      this.isCommenting = false;
      this.newComment = '';
      this.replyTo = '';
      this.currentCommentId = null;
    },
    // 提交评论
    submitComment() {
      if (!this.newComment.trim()) return;

      const commentData = {
        commenterId: uni.getStorageSync("userId"),
        content: this.newComment,
        parentCommentId: this.parentCommentId || 0,
        articleId: this.article.id,
        status: 0
      };

      createMsg(commentData).then(res => {
        if (res.data.code === 0) {
          uni.showToast({
            title: '评论成功',
            icon: 'success'
          });
          this.closeCommentBox();
          this.getMsgList(); // 刷新评论列表
          this.parentCommentId = null;
        }
      });
    },
    toggleLike() {
      // this.isLiked = !this.isLiked;
      // this.likeCount += this.isLiked ? 1 : -1;
      const data = {
        articleId:this.article.id,
        userId:JSON.parse(uni.getStorageSync("userId"))
      }
      if (!this.isLiked){
        createArticleLike(data).then(res=>{
          console.log(res)
          if (res.data.code=== 0){
            this.getArticLike()
            this.getArticLikeTotal()

            // this.isLiked = false
          }
        })
      }else {
        if (this.currentData){
          deleteArticleLike(this.currentData.id).then(res=>{
            if (res.data.code=== 0){
              this.getArticLike()
              this.getArticLikeTotal()
              this.isLiked = false
            }
          })
        }
      }

    },
    toggleFavorite() {
      this.isFavorited = !this.isFavorited;
    },
    toggleCommentLike(comment) {
      // 构建更新评论的数据
      const updateData = {
        commenterId: uni.getStorageSync("userId"),
        id: comment.id,
        articleId: this.article.id,
        likesCount: comment.isLiked ? (comment.likesCount - 1) : (comment.likesCount + 1)
      }
      
      // 调用更新评论接口
      updateMsg(updateData).then(res => {
        if (res.data.code === 0) {
          // 更新成功后，更新本地评论状态
          comment.isLiked = !comment.isLiked;
          comment.likesCount = updateData.likesCount;
        }
      });
    },
    toggleSubComments(comment) {
      comment.showSubComments = !comment.showSubComments;
    },
    // 处理HTML内容
    formatContent(content) {
      if (!content) return '';
      // 可以在这里添加额外的内容处理逻辑
      return content;
    },
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 120rpx; /* 为底部操作栏留出空间 */
}

/* 内容区域 */
.content-area {
  padding: 30rpx;

  .header-section {
    margin-bottom: 30rpx;

    .title {
      font-size: 40rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 30rpx;
      line-height: 1.4;
    }

    .topic-tag {
      display: inline-flex;
      align-items: center;
      background: linear-gradient(45deg, #FFE5EE, #FFC0D9);
      padding: 8rpx 20rpx;
      border-radius: 30rpx;
      font-size: 24rpx;
      color: #FF85AD;
      box-shadow: 0 4rpx 8rpx rgba(255, 133, 173, 0.2);

      .tag-prefix {
        margin-right: 6rpx;
        font-weight: bold;
      }

      .tag-text {
        font-weight: 500;
      }
    }
  }

  .author-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30rpx 0;
    padding: 20rpx 30rpx;
    background: rgba(255, 133, 173, 0.05);
    border-radius: 16rpx;
    border: 1rpx solid rgba(255, 133, 173, 0.1);

    .author-info {
      display: flex;
      align-items: center;
      flex: 1;

      .author-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        border: 2rpx solid rgba(255, 133, 173, 0.2);
      }

      .author-details {
        .author-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 4rpx;
        }

        .publish-time {
          font-size: 24rpx;
          color: rgba(153, 153, 153, 0.8);
        }
      }
    }

    .follow-btn {
      .follow-button, .followed-button {
        height: 56rpx;
        border-radius: 28rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        transition: all 0.3s ease;

        .tn-icon-add, .tn-icon-check {
          font-size: 24rpx;
          margin-right: 8rpx;
        }
      }

      .follow-button {
        background: #FF85AD;
        color: #fff;
        box-shadow: 0 2rpx 8rpx rgba(255, 133, 173, 0.2);

        &:active {
          transform: scale(0.95);
        }
      }

      .followed-button {
        background: transparent;
        color: #FF85AD;
        border: 1rpx solid #FF85AD;
        font-size: 26rpx;
      }
    }
  }

  .content-wrapper {
    margin: 30rpx 0;
    padding: 0 20rpx;

    .content {
      font-size: 30rpx;
      line-height: 1.8;
      color: #333;

      :deep(p) {
        margin-bottom: 20rpx;
      }

      :deep(img) {
        max-width: 100%;
        height: auto;
        margin: 20rpx 0;
        border-radius: 12rpx;
      }

      :deep(a) {
        color: #FF85AD;
        text-decoration: none;

        &:active {
          opacity: 0.8;
        }
      }

      :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
        margin: 30rpx 0 20rpx;
        font-weight: 600;
        color: #333;
      }

      :deep(h1) { font-size: 40rpx; }
      :deep(h2) { font-size: 36rpx; }
      :deep(h3) { font-size: 32rpx; }
      :deep(h4) { font-size: 30rpx; }
      :deep(h5) { font-size: 28rpx; }
      :deep(h6) { font-size: 26rpx; }

      :deep(ul), :deep(ol) {
        padding-left: 40rpx;
        margin: 20rpx 0;
      }

      :deep(li) {
        margin: 10rpx 0;
      }

      :deep(blockquote) {
        margin: 20rpx 0;
        padding: 20rpx;
        background: rgba(255, 133, 173, 0.05);
        border-left: 8rpx solid #FF85AD;
        border-radius: 8rpx;

        p {
          margin: 0;
        }
      }

      :deep(code) {
        background: #f5f5f5;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
        font-family: monospace;
      }

      :deep(pre) {
        background: #f5f5f5;
        padding: 20rpx;
        border-radius: 8rpx;
        overflow-x: auto;
        margin: 20rpx 0;

        code {
          background: none;
          padding: 0;
        }
      }

      :deep(table) {
        width: 100%;
        border-collapse: collapse;
        margin: 20rpx 0;

        th, td {
          border: 1rpx solid #eee;
          padding: 16rpx;
          text-align: left;
        }

        th {
          background: #f8f8f8;
          font-weight: 600;
        }
      }
    }
  }

  .media-section {
    margin: 30rpx 0;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

    .article-image {
      width: 100%;
      height: 400rpx;
      object-fit: cover;
    }

    .article-video {
      width: 100%;
      height: 400rpx;
    }
  }
}

/* 评论区样式 */
.comments-section {
  margin-top: 40rpx;
  background: #fff;
  border-top: 1rpx solid #eee;

  .comments-header {
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #eee;

    .comments-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .comments-count {
      font-size: 26rpx;
      color: #999;
    }
  }

  .comments-list {
    padding: 0 30rpx;

    .comment-item {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .comment-main {
    display: flex;
    align-items: flex-start;
  }

  .comment-avatar {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    border: 2rpx solid rgba(255, 133, 173, 0.1);
  }

  .comment-content {
    flex: 1;
    overflow: hidden;

    .comment-info {
      display: flex;
      align-items: center;
      margin-bottom: 8rpx;

      .comment-username {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        margin-right: 12rpx;
      }

      .comment-time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .comment-text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
      margin-bottom: 12rpx;

      .reply-to {
        color: #FF85AD;
        margin-right: 8rpx;
        font-weight: 500;
      }
    }
  }

  .comment-actions {
    display: flex;
    align-items: center;
    gap: 30rpx;

    .action-btn {
      display: flex;
      align-items: center;
      padding: 8rpx 0;
      cursor: pointer;

      .tn-icon {
        font-size: 32rpx;
        color: #999;
        margin-right: 6rpx;

        &.active, &.tn-icon-up {
          color: #FF85AD;
        }
      }

      .action-text {
        font-size: 24rpx;
        color: #999;

        &:hover {
          color: #FF85AD;
        }
      }
    }
  }

  .sub-comments {
    margin-left: 84rpx;
    margin-top: 20rpx;
    padding: 20rpx;
    background: rgba(245, 245, 245, 0.6);
    border-radius: 12rpx;
    transition: all 0.3s ease;

    .sub-comment-item {
      display: flex;
      align-items: flex-start;
      padding: 20rpx 0;

      &:not(:last-child) {
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
      }

      .comment-avatar {
        width: 56rpx;
        height: 56rpx;
      }
    }
  }
}

/* 评论弹出层 */
.comment-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
  }

  .popup-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 30rpx;
    transform: translateY(0);
    transition: transform 0.3s ease;

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .popup-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
      }

      .close-icon {
        font-size: 40rpx;
        color: #999;
        padding: 10rpx;
      }
    }

    .input-area {
      .comment-textarea {
        width: 100%;
        min-height: 160rpx;
        padding: 20rpx;
        font-size: 28rpx;
        line-height: 1.5;
        background: #f8f8f8;
        border-radius: 12rpx;
        box-sizing: border-box;
      }

      .bottom-tools {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;

        .tools-left {
          display: flex;
          gap: 30rpx;

          .tool-icon {
            font-size: 40rpx;
            color: #666;
          }
        }

        .send-button {
          background: #f0f0f0;
          color: #999;
          font-size: 28rpx;
          padding: 12rpx 30rpx;
          border-radius: 30rpx;
          border: none;
          transition: all 0.3s ease;

          &.active {
            background: #FF85AD;
            color: #fff;
          }
        }
      }
    }
  }
}

/* 底部评论栏 */
.floating-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16rpx 30rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;

  .comment-input-trigger {
    flex: 1;
    background: #f5f5f5;
    border-radius: 36rpx;
    padding: 16rpx 30rpx;
    margin-right: 20rpx;

    .input-placeholder {
      color: #999;
      font-size: 28rpx;
    }
  }

  .action-buttons {
    display: flex;
    gap: 40rpx;

    .action-item {
      display: flex;
      align-items: center;

      .tn-icon-like, .tn-icon-star, .tn-icon-comment {
        font-size: 40rpx;
        color: #666;
        margin-right: 6rpx;

        &.active {
          color: #FF85AD;
        }
      }

      .count {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
</style>
